<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red" size="mini">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="memberId" test="name" v-on:confirm="filterEvent"></filter-tool>
          <filter-tool class="filtertool" type="clientId" test="clientName" v-on:confirm="filterEvent"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchProductEvent"></search-tool>
      </el-form-item>
      <!--<el-form-item label="" style="border: 0px solid red;float: right">-->
        <!--<el-button size="mini" @click="addActBtn" type="primary" icon="el-icon-plus"/>-->
      <!--</el-form-item>-->
    </el-form>
    <el-table :data="shareList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="分享描述" prop="description"/>
      <el-table-column prop="memberName" label="分享者"/>
      <el-table-column label="查看">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="lookAccessBtn(scope.row)">访问记录</el-button>
        </template>
      </el-table-column>
      <el-table-column label="预览">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="previewBtn(scope.row)">预分享图</el-button>
          <el-button size="mini" type="text" @click="qrCodeBtn(scope.row)">小程序码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:20px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
  </section>
</template>

<script>
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "list",
    components:{searchTool,filterTool},
    data() {
      return {
        shareList:null,
        totalPage:0,
        typeList:[
          {name:'商品',code:'goods',val:2},
          {name:'活动',code:'activity',val:1}
        ],
        filterObj:{},
      }
    },
    created(){
      this.getShareList()
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getShareList(val-1,this.filterObj)
      },
      getShareList(pageNo,filterObj){
        this.fetch({name:"getShareList",data:{page:pageNo?pageNo:0,...filterObj,contentType:1}})
          .then(res=>{
            console.log(res)
            this.shareList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      previewBtn(row){
        console.log(row)
        let str='<!DOCTYPE html><html><body ><img src="'+row.data.wxaCodeUrl+'" style="width: 30%;height: 30%;" /></body></html>'
        let a=window.open("")
        a.document.write(str)
      },
      qrCodeBtn(row){
        console.log(row)
        let str='<!DOCTYPE html><html><body ><img src="'+row.data.simpleWxaCodeUrl+'" style="width: 30%;height: 30%;" /></body></html>'
        let a=window.open("")
        a.document.write(str)
      },
      lookAccessBtn(row){
        this.$message('还看不了啊~')
      },
      filterEvent(e,objK){
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k] !== undefined){
            tmp[k]=this.filterObj[k]
          }
        }
        this.getShareList(0,tmp)
      },
      searchProductEvent(e){
        this.filterObj.key=e
        this.getShareList(0,this.filterObj)
      },
    }
  }
</script>

<style scoped>

</style>
